import { useRef, useState } from "react"

export default function From()
{
    const [mobile,SetMobile] = useState('');
    const AvatarRef = useRef(null);
    const [CheckBoxList, SetCheckBoxList] = useState([]);


    const OnSubmit = (e) =>
    {
        e.preventDefault();

        console.log(mobile);

        const form = e.target;

        const formData = new FormData(form);

        console.log(formData.get('avatar'))

        console.log(AvatarRef.current.files)
    }

    const OnCheckBoxChange = (e) =>
    {
        const value = e.target.value;

        const checked = e.target.checked;

        if(checked)
        {
            SetCheckBoxList([...CheckBoxList,value]);
        }else{
            SetCheckBoxList(CheckBoxList.filter(val => val !== value));
        }

    }

    return (
        <>
            <form onSubmit={OnSubmit}>
                <input type="text" name="mobile" value={mobile} onChange={(e) => SetMobile(e.target.value)} />
                <input type="password" name="password" defaultValue={123456} />

                <input type="file" name="avatar" ref={AvatarRef} />

                <br />

                <label>
                爱好 <label><input type="checkbox" value="sleep"
                    checked={CheckBoxList.includes('sleep')}
                    onChange={OnCheckBoxChange} /> 睡觉</label>
                <label><input type="checkbox" value="code"
                    checked={CheckBoxList.includes('code')}
                    onChange={OnCheckBoxChange} /> 敲代码</label>
                <label><input type="checkbox" value="music"
                    checked={CheckBoxList.includes('music')}
                    onChange={OnCheckBoxChange} /> 听音乐 </label>
                </label>

                <br />

                <button type="submit">提交</button>
            </form>
        </>
    )
}